<template>
	<view class="flex-col section">
	  <view class="flex-col group_3">
		<text class="self-start font_2">{{info.truename}}</text>
		<view class="flex-row justify-end relative group_4 space-x-51-reverse">
		  <!-- 
		  <view class="flex-row items-center space-x-9">
			<image
			  class="shrink-0 image_4"
			  src="/static/car-del.png"
			/>
			<text class="font_1">删除</text>
		  </view>
		  -->
		  <view class="flex-row items-center space-x-9" @click="navTo('/pages/employee/employeeHandle',{id:info.id})">
			<image
			  class="shrink-0 image_5"
			  src="/static/car-edit.png"
			/>
			<text class="font_1">编辑</text>
		  </view>
		</view>
	  </view>
	  <text class="self-start font_3">{{info.mobile}}</text>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	computed
	// watch,
	// nextTick,
	// ref,
} from 'vue';
// import { onReachBottom,onLoad } from "@dcloudio/uni-app";
const employeeItem = defineComponent({
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			info: {}
		});
		watchEffect(() => {
			data.info = props.info;
		});
		const showDate = timestamp => {
			return uni.$tools.date('m月d日 H:i', timestamp);
		};

		return {
			...toRefs(data),
			showDate
		};
	}
});
export default employeeItem;
</script>

<style lang="scss" scoped>
.section {
  padding: 36rpx 28rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 24rpx;
  .group_3 {
    height: 53rpx;
    .font_2 {
      font-size: 32rpx;
      font-family: PingFang;
      color: #333333;
    }
    .group_4 {
      margin-top: -10rpx;
      .space-x-9 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 9rpx;
        }
        .image_4 {
          width: 34rpx;
          height: 32rpx;
        }
        .font_1 {
          font-size: 24rpx;
          font-family: PingFang;
          color: #333333;
        }
        .image_5 {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .space-x-51-reverse {
      & > view:not(:last-child),
      & > text:not(:last-child),
      & > image:not(:last-child) {
        margin-right: 51rpx;
      }
    }
  }
  .font_3 {
    font-size: 26rpx;
    font-family: PingFang;
    color: #333333;
  }
}
</style>
